<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Canvas Example</title>
    <style>
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
            background-color: #f0f0f0;
        }

        #container {
            position: relative;
        }

        #mobileRect {
            position: absolute;
            left: 0;
            top: 0;
            width: 50px;
            /* 修改为你希望的宽度 */
            height: 50px;
            /* 修改为你希望的高度 */
            background-color: red;
            /* 为了方便观察 */
        }
    </style>
</head>

<body>
    <div id="container">
        <canvas id="myCanvas" width="500" height="500" style="border:1px solid #000000;"></canvas>
        <div id="mobileRect"></div>
    </div>

    <script>
        function moveRect(mobileDom, width, height) {
            var canvas = document.getElementById('myCanvas');
            var ctx = canvas.getContext('2d');

            var rect = { x: 250, y: 50, width: width, height: height };
            var isMouseInside = false;

            canvas.addEventListener('mouseenter', function () {
                isMouseInside = true;
                requestAnimationFrame(draw);
            });

            canvas.addEventListener('mouseleave', function () {
                isMouseInside = false;
            });

            canvas.addEventListener('mousemove', function (e) {
                if (isMouseInside) {
                    var mousePos = getMousePos(canvas, e);
                    rect.x = mousePos.x - rect.width / 2;
                    rect.y = mousePos.y - rect.height / 2;

                    // 边界检查
                    if (rect.x < 0) rect.x = 0;
                    if (rect.y < 0) rect.y = 0;
                    if (rect.x + rect.width > canvas.width) rect.x = canvas.width - rect.width;
                    if (rect.y + rect.height > canvas.height) rect.y = canvas.height - rect.height;

                    requestAnimationFrame(draw);
                }
            });

            function draw() {
                ctx.clearRect(0, 0, canvas.width, canvas.height);
                ctx.strokeStyle = '#0000FF';
                ctx.strokeRect(rect.x, rect.y, rect.width, rect.height);
            }

            function getMousePos(canvas, evt) {
                var rect = canvas.getBoundingClientRect();
                return {
                    x: evt.clientX - rect.left,
                    y: evt.clientY - rect.top
                };
            }

            draw();
        }

        // 使用示例
        var mobileDom = document.getElementById('mobileRect');
        var width = parseInt(getComputedStyle(mobileDom).width);
        var height = parseInt(getComputedStyle(mobileDom).height);
        moveRect(mobileDom, width, height);
    </script>
</body>

</html>